<template>
  <div class="reservation">
    <header-tab>
      <span slot="left" @click="Go_upper"><van-icon name="arrow-left" /></span>
      <span slot="title">宠物寄养</span>
    </header-tab>

    <!-- 联系人卡片  -->

    <div v-if="contactData">
      <van-contact-card type="edit" :name="contactData.name" :tel="contactData.tel" @click="onEdit" />
    </div>
    <div v-else><van-contact-card type="add" @click="onAdd" /></div>

    <!-- 服务部分 -->
    <div class="add_pets">
      <div class="add_service">服务宠物</div>
      <div class="add_photo">
        <!-- 第一个 -->
        <div class="photo_one" v-for="(item, p_id) in petData" :key="p_id">
          <van-badge>
            <van-image round width="4rem" height="4rem" :src="item.p_img" />
            <template #content>
              <van-icon @click="delete_pet(item)" name="minus sign" class="badge-icon" />
            </template>
          </van-badge>
          <div class="photo_name">{{ item.p_name }}</div>
        </div>

        <div class="photo_one">
          <van-icon @click="Go_PetFiles(petNumber)" name="add-o" size="4rem" color="#b6b4c1" />
          <div class="photo_name">添加</div>
        </div>
      </div>
    </div>
    <fengexian></fengexian>
    <!-- 寄养日期 -->
    <div class="Foster_care_date">
      <van-cell :style="{ height: '6rem' }" center is-link :value="date" title="寄养日期" @click="show = true" />
      <van-calendar
        color="#f8e176"
        confirm-disabled-text="请选择结束时间"
        v-model="show"
        type="range"
        @confirm="onConfirm"
      />
    </div>
    <fengexian></fengexian>
    <!-- 服务备注 -->
    <van-cell center :style="{ height: '6rem' }" title="服务备注" value="选填" click />
    <van-field
      v-model="beizhu"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入服务备注"
      show-word-limit
    />
    <fengexian></fengexian>
    <!-- Booking instructions -->
    <p class="book_detail">预定须知</p>
    <p class="book_details">更多服务细节,下单后会和您联系确认</p>
    <p class="book_detail">取消政策</p>
    <p class="book_details">服务时间首天前可免费取消,服务时间首天后取消,扣除首天费用</p>
    <div class="service_order">
      <van-checkbox v-model="checked" icon-size="15px"
        >已阅读并同意<span style="color: #96cfe8">⟪服务协议⟫</span>
      </van-checkbox>
    </div>
    <!-- 提交订单 -->
    <div @click="show1 = true">
      <van-submit-bar
        :price="petData.length * dateNumber * this.$route.query.b_price * 100"
        button-text="提交订单"
        @submit="onSubmit"
        button-color="#f8e176"
      />
    </div>
    <van-overlay :show="show1" @click="show1 = false" />

    <div class="payment" v-if="popping_payment">
      <span @click="offPayment" class="title_left"><van-icon name="cross" size="2.4rem" /></span>
      <div class="money">￥{{ petData.length * dateNumber * this.$route.query.b_price }}.00</div>
      <div class="payment_fangshi">
        <span class="payment_method">支付方式</span>
        <div class="zhifu_hang">
          <img src="../assets/img/weixinzhifu.png" alt="" />
          <div class="pay_size">微信支付</div>
          <span> <van-icon name="success" size="2rem" /></span>
        </div>
        <div class="zhifu_hang">
          <img src="../assets/img/zhifubao.png" alt="" />
          <div class="pay_size">支付宝支付</div>
        </div>
      </div>

      <span @click="confirmPayment" class="confirm_payment">确认付款</span>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import HeaderTab from '@/components/HeaderTab.vue';
import Fengexian from '@/components/fengexian.vue';
import { mapState } from 'vuex';
export default {
  components: { HeaderTab, Fengexian },
  props: ['b_price', 'b_name', 'b_id', 'linkmanID'],
  ...mapState['linkManID'],
  data() {
    return {
      petNumber: null, //宠物数量
      petData: [], //存储宠物信息
      checked: true, //默认选中<<服务协议>>
      date: '', //存储选择的寄养时间
      dateNumber: '', //寄养的天数
      show: false, //日记选择的显示与隐藏
      contactData: null, //用于存储联系人信息
      beizhu: '', //服务备注
      popping_payment: false, //弹出支付页面
      show1: false, //遮罩默认关闭
    };
  },

  methods: {
    delete_pet(item) {
      console.log('删除宠物', item.p_id);
      let delID = item.p_id;
      console.log(delID);

      this.petData = this.petData.filter(item => {
        return item.p_id != delID;
      });
      console.log(this.petData);
    },
    offPayment() {
      this.popping_payment = false;
      this.show1 = false;
    },

    //获取宠物信息
    getPetData() {
      const url = `pet/selectPet`;
      let params = `user_id=${sessionStorage.getItem('UserID')}`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        this.petData = res.data.data;
        console.log(this.petData);
        this.petNumber = res.data.data.length;
      });
    },
    //支付下单
    confirmPayment() {
      let p_ids = [];
      this.petData.forEach(item => {
        p_ids.push(item.p_id);
      });
      let pnames = [];
      this.petData.forEach(item => {
        pnames.push(item.p_name);
      });
      // console.log(pnames);
      // console.log(object);

      const url = `/order/add`;
      let params = `u_id=${sessionStorage.getItem('UserID')}&&pet_id=${p_ids}&&bus_id=${
        this.$route.query.b_id
      }&&po_price=${
        this.petNumber * this.dateNumber * this.$route.query.b_price
      }&&po_petName=${pnames}&&po_userName=${sessionStorage.getItem('Uname')}&&po_time=${this.date}&&po_userPhone=${
        this.contactData.tel
      }&&po_beizhu=${this.beizhu}&&po_status=1&&po_linkman=${this.contactData.name}&&po_bus_name=${
        this.$route.query.b_name
      }&&po_number=${new Date().getTime()}`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          Toast.success('支付成功');
          this.popping_payment = false;
          this.show1 = false;
          setTimeout(() => {
            this.$router.push('/order');
          }, 2000);
        }
      });
    },

    // 点击立即预定按钮
    onSubmit() {
      if (!this.date) {
        Toast('请选择寄养时间');
        return;
      }
      console.log('点我下单');
      this.popping_payment = true;
    },

    // 返回上一页
    Go_upper() {
      this.$router.back();
    },
    //获取联系方式信息
    getcontactData() {
      if (this.$store.state.linkManID) {
        const url = `user/contact/select`;
        let params = `manid=${this.$store.state.linkManID}`;
        this.axios.post(url, params).then(res => {
          console.log(res);
          res.data.data.forEach(element => {
            this.contactData = element;
            console.log(this.contactData);
          });
          // this.contactData = res.data.data;
        });
      } else {
        const url = `user/contact`;
        let params = `user_id=${sessionStorage.getItem('UserID')}`;
        this.axios.post(url, params).then(res => {
          console.log(res);
          res.data.data.forEach(element => {
            if (element.isDefault == 0) {
              this.contactData = element;
              console.log(this.contactData);
            }
          });
          // this.contactData = res.data.data;
        });
      }
    },
    // 跳转至新增联系人页面
    onAdd() {
      this.$router.push('/contactadd');
    },
    // 跳转至联系人编辑页面
    onEdit() {
      this.$router.push({
        name: 'contactlist',
        query: {
          id: this.contactData.id,
        },
      });
      this.$route.query.name;
    },
    // 跳转至 宠物新增 页面
    Go_PetFiles(petNumber) {
      this.$router.push({
        name: 'petfiles',
        query: {
          petNumber: this.petNumber,
        },
      });
    },
    //日历 时间 功能
    formatDate(date) {
      // console.log(date.getMonth());
      let myDate = new Date();
      let tYear = myDate.getFullYear();
      // console.dir(date.getDate());
      return `${tYear}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      // console.log(this.formatDate(end).split('-',3)[2]);
      // console.log(this.formatDate(start).split('-',3)[2]);
      this.dateNumber = this.formatDate(end).split('-', 3)[2] - this.formatDate(start).split('-', 3)[2];
      console.log(this.dateNumber);
    },
  },
  mounted() {
    this.getPetData();
    this.getcontactData();
  },
};
</script>

<style lang="scss" scoped>
.reservation {
  display: block;
  padding-bottom: 10rem;
  // height: 100rem;
}
.van-contact-card::before {
  height: 4px;
  background: -webkit-repeating-linear-gradient(
    135deg,
    #feeca1 0,
    #feeca1 20%,
    transparent 0,
    transparent 25%,
    #ffb6b7 0,
    #ffb6b7 45%,
    transparent 0,
    transparent 50%
  );
  background: repeating-linear-gradient(
    -45deg,
    #feeca1 0,
    #feeca1 20%,
    transparent 0,
    transparent 25%,
    #ffb6b7 0,
    #ffb6b7 45%,
    transparent 0,
    transparent 50%
  );
  background-size: 80px;
  content: '';
}
.add_service {
  margin-left: 1rem;
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: bold;
  margin: 1rem auto;
  width: 90%;
}
.add_photo {
  display: flex;
  overflow-y: hidden;
  overflow: hidden;
  overflow-x: scroll;
  padding-top: 1rem;
  width: 90%;
  margin: 0 auto;
  align-items: center;
  .photo_one {
    width: 4rem;
    margin: 0 1.4rem;
  }
  .photo_name {
    text-align: center;
    margin: 1rem auto;
  }
}
.add_photo::-webkit-scrollbar {
  display: none;
}

.van-cell__title {
  font-size: 1.6rem;
}
.book_details {
  font-size: 1.5rem;
  margin: 1rem auto;
  width: 90%;
  line-height: 2rem;
  color: #524f5e;
}
.book_detail {
  font-size: 1.5rem;
  margin: 1rem auto;
  width: 90%;
  line-height: 2rem;
  color: #524f5e;
  font-weight: bold;
}
.service_order {
  font-size: 1.5rem;
  margin: 1rem auto;
  width: 90%;
  // height: 20rem;
}

.van-divider {
  margin: 12px 0;
}
// 弹窗支付
.payment {
  padding-top: 2rem;
  background-color: #ffffff;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 1rem;
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  height: 30rem;
  // padding: 1rem;
  .title_left {
    margin-left: 2rem;
  }
  .money {
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
  }
  .payment_fangshi {
    margin-top: 3rem;
    .zhifu_hang {
      margin-top: 1rem;
      display: flex;
      align-items: center;
    }
    .payment_method {
      margin-left: 2rem;
      display: block;
      font-size: 1.4rem;
      color: #6e6e6e;
    }
  }

  img {
    margin-left: 2rem;

    // display: block;
    width: 3rem;
    // margin-top: 1rem;
  }
  .pay_size {
    display: inline-block;
    // margin-left: 1rem;
    // padding-bottom: 1rem;
  }
  .confirm_payment {
    display: block;
    width: 90%;
    height: 5rem;
    background-color: #f8e176;
    color: white;
    font-size: 1.6rem;
    line-height: 5rem;
    text-align: center;
    margin: 0 auto;
    margin-top: 5rem;
  }
}
</style>
